<template>
    <div class="home_login">
        <div class="home_title">
            <h1>二手校园</h1>
        </div>
        <div class="home_select">
            <el-tabs class="el_tabs" v-model="activeName" @tab-click="handleClick">
                    <el-form :model="user" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="" prop="phone">
                            <el-input placeholder="手机号" v-model="user['phone']" clearable value="17746676927"></el-input>
                        </el-form-item>
                        <el-form-item label="" prop="code">
                            <el-input placeholder="动态码" type="text" v-model="user['code']" value="4553"></el-input>
                        </el-form-item>
                        <el-form-item label="" prop="userName">
                            <el-input placeholder="账户名" type="text" v-model="user['userName']" value="admin"></el-input>
                        </el-form-item>
                        <el-form-item label="" prop="password">
                            <el-input placeholder="设置密码" type="text" v-model="user['password']" value="123456"></el-input>
                        </el-form-item>
                        <el-form-item label="" prop="copy">
                            <el-input placeholder="确定密码" type="text" v-model="user['copy']" value="123456"></el-input>
                        </el-form-item>
                    </el-form>
            </el-tabs>
            <div class="button" @click="registerMthods">注册</div>
        </div>
    </div>
</template>

<script>
import common from '../common/index'
import { post } from '@/api/index'
export default {
  data () {
    const validatorTelAndMobile = function (rule, value, callback) {
      if (value) {
        common.phoneVerification(value) ? this.phoneType = !this.phoneType : callback(new Error())
      } else {
        callback(new Error())
      }
    }
    return {
      activeName: 'first',
      phoneType: false, // 判断手机验证是否通过
      user: {
        userName: '',
        password: '',
        code: '',
        copy: '',
        phone: ''
      },
      radio: '',
      rules: {
        userName: [
          { required: true, message: '您还未输入账号名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        phone: [
          { validator: validatorTelAndMobile, required: true, message: '请输入正确手机号格式', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '您还未输入密码', trigger: 'blur' },
          { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入动态码', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    console.log(this.phoneType, 'login')
  },
  methods: {
    registerMthods () {
      const { password, copy } = this.user
      if (password !== copy) {
        return this.$message({
          type: 'error',
          message: '两次密码不一致'
        })
      }
      this.register()
    },
    register () {
      post('/register', this.user).then(res => {
        console.log(res, 'res')
      })
    },
    handleClick (tab, event) {
      console.log(tab, event)
    }
  }
}
</script>

<style lang="less" scoped>
.home_login {
    width: 476px;
    background: #fff;
    border-radius: 5px;
    padding-bottom: 40px;
    .home_title {
        padding-top: 50px;
        box-sizing: border-box;
        h1 {
            font-weight: 600;
            font-size: 26px;
            text-align: center;
            color: #ff552e;
        }
    }
    .button {
        width: 100%;
        height: 42px;
        text-align: center;
        background-color: #ff552e;
        line-height: 42px;
        color: #fff;
        margin-top: 20px;
        cursor: pointer;
    }
    .home_select {
        width: 350px;
        margin: 30px auto 0;
        .password_forget {
            color: #999;
            float: right;
            font-size: 12px;
        }
        /deep/.el-radio__label {
            color: #999;
        }
        .el_tabs {
            margin-top: 30px;
        }
        /deep/.el-form-item__content {
            margin-top: 10px;
            margin-left: 0 !important;
        }
        /deep/.el-input__inner:focus {
            border: 1px solid #999;
        }
        /deep/.el-tabs__nav {
            width: 100%;
        }
        /deep/.el-tabs__active-bar {
            background-color: #ff552e;
        }
        /deep/.is-active {
                color: #ff552e !important;
            }
        /deep/ .el-tabs__item {
            text-align: center;
            width: 50%;
        }
        /deep/ .el-tabs__item:hover {
            color: #000;
        }
    }
}
</style>
